import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 导入英文语言包...
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

// 定义一个全局 的自定义指令  所有地方都能用
// v-permission
Vue.directive('permission', {
  // 指令所在的元素被插入页面中执行
  inserted: function(el, binding) {
    // el 就是当前 指令所在的元素
    // binding.value  指令的值
    // ...
    if (!store.state.user.userInfo.roles?.points?.includes?.(binding.value)) {
      // 没有权限  删除这个元素
      el.remove()
    }
  }
})

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// 为了模拟后端接口返回数据 => 不需要 => 我们有真正的后端接口 有数据  无需模拟
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 让组件库的主题语言变成英文
// Vue.use(ElementUI, { locale: locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI) // 默认中文 没有语言模式  后续所有组件库中的组件语言都是中文

Vue.config.productionTip = false

// 项目的起点
// 创建Vue实例 指定挂载点 渲染app根组件 注入路由 注入仓库 全局注册组件库
new Vue({
  el: '#app',
  router: router,
  store,
  render: h => h(App) // 渲染app 页面完全由app决定
})

// 如何获取环境变量
// 固定写法 process.env.xxx
console.log(process.env.VUE_APP_NAME)
